<template>
  <!-- 利用 el-table 模拟微博动态展示，保留原有数据请求逻辑 -->
    <el-table :data="tableData" stripe style="width: 100%" border  @row-click="handleRowClick">
        <!-- 自定义一列，用来渲染类似微博动态的内容 -->
        <el-table-column label="微博动态" align="center">
            <template #default="scope">
                <div class="weibo-card">
                    <!-- 头像及发布者信息区域 -->
                    <div class="weibo-card__header">
                        <!-- 这里假设数据里有头像字段 avatar，可根据实际接口返回调整 -->
                        <img :src="scope.row.avatar" alt="avatar" class="weibo-card__avatar" />
                        <div class="weibo-card__info">
                            <!-- 发布者名称，对应原 userId 字段，可根据实际改 -->
                            <span class="weibo-card__nickname">{{ scope.row.userId }}</span>
                            <span class="weibo-card__meta">
                <!-- 发布时间，对应原 time 字段 -->
                {{ scope.row.time }}
                                <!-- 发布来源，可根据实际接口返回决定是否显示及字段 -->
                来自 微博网页版
              </span>
                        </div>
                    </div>
                    <!-- 动态内容区域，对应原 text 字段 -->
                    <div class="weibo-card__content">
                        {{ scope.row.text }}
                        <!-- 假设数据里有图片字段 images，可循环展示图片，这里简单模拟单图 -->
                        <div class="weibo-card__image" v-if="scope.row.url">
                            <img :src="scope.row.url" alt="weibo-img" />
                        </div>
                    </div>
                    <!-- 互动按钮区域 -->
                    <div class="weibo-card__actions">
            <span class="weibo-card__action">
              <el-icon><ChatDotRound /></el-icon>
                <!-- 假设接口返回评论数字段 commentCount，没有可自行模拟或隐藏 -->
              {{ scope.row.commentCount || 0 }}
            </span>
                        <span class="weibo-card__action">
              <el-icon><StarFilled /></el-icon>
                            <!-- 假设接口返回点赞数字段 likeCount，没有可自行模拟或隐藏 -->
              {{ scope.row.likeCount || 0 }}
            </span>
                        <span class="weibo-card__action">
              <el-icon><Share /></el-icon>
                            <!-- 假设接口返回转发数字段 forwardCount，没有可自行模拟或隐藏 -->
              {{ scope.row.forwardCount || 0 }}
            </span>
                        <span class="weibo-card__action">
              <el-icon><View /></el-icon>
                            <!-- 假设接口返回浏览数字段 browse，没有可自行模拟或隐藏 -->
                          {{ scope.row.browse || 0 }}
            </span>
                    </div>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted } from 'vue';
// 引入 Element Plus 图标，按需添加
import { ChatDotRound, StarFilled, Share } from '@element-plus/icons-vue';
import router from "../router"

const post = ref({
    id: '',
    userId: '',
    title:'',
    time: '',
    text: '',
    url: '',
    browse:'0',
    // 可扩展其他字段，如头像、评论数等
    avatar: '/src/assets/t1.png', // 默认头像示例
    commentCount: 0,
    likeCount: 0,
    forwardCount: 0,
});
const tableData = ref([]);

onMounted(() => {
    doList();
});

const doList = async () => {
    const { data } = await axios.get('/api/post', {
        params: post.value,
    });
    tableData.value = data;
};
const handleRowClick = (row) => {
  router.push(`/poster?id=${row.id}`)
}
</script>

<style scoped>
.weibo-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.weibo-card__header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.weibo-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
}
.weibo-card__info {
    display: flex;
    flex-direction: column;
}
.weibo-card__nickname {
    font-weight: bold;
    color: #333;
}
.weibo-card__meta {
    font-size: 12px;
    color: #999;
}
.weibo-card__content {
    margin: 8px 0;
    color: #333;
    line-height: 1.6;
}
.weibo-card__image {
    margin-top: 8px;
}
.weibo-card__image img {
    max-width: 200px;
    border-radius: 4px;
}
.weibo-card__actions {
    display: flex;
    gap: 24px;
    color: #666;
    margin-top: 8px;
    cursor: pointer;
}
.weibo-card__action {
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}
.weibo-card__action:hover {
    color: #409eff;
}
</style>